import React from "react";
import classes from "./BudgetBall.module.css";
import { useNavigate } from "react-router-dom";
export default function BudgetBall({ theme, click, children, temText, height, marginTop }) {
    const navigate = useNavigate();
    return (
        <div className={classes.BudgetBall} style={{ backgroundColor: theme === "light" ? "#fff" : "#000", height: `${height}rem`, marginTop: `${marginTop}rem` }}>
            {children}
            <div className={classes.circle} onClick={() => click && navigate(`/${click}`)} style={{ borderColor: theme === "light" ? "#e5f3f8" : "#19272c" }}>
                $1800
            </div>
            {temText && (
                <div className={classes.text} style={{ color: theme === "light" ? "#2f2f2f" : "#fff" }}>
                    You have Spend total 60% of you budget
                </div>
            )}
        </div>
    );
}
